<!-- http://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
    #triangle-up{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }
    #triangle-down{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
    }

  </style>
</head>
<body>

  <div id="triangle-up"></div>
  <div id="triangle-down"></div>
</body>
</html>
